<script setup lang="ts">
import { onMounted, watch, ref } from 'vue';
import axios from 'axios';

import { storeToRefs } from 'pinia';

// 导入我们创建的 useCounterStore 函数
import { useCounterStore } from '../store/counter';

import type { ArticleItem, ArticleResData } from '../types/data';

// 接收频道id
const props = defineProps<{ channelId: number }>();
// 定义文章列表响应式数据
const articles = ref<ArticleItem[]>([]);
// 创建 counter store 实例
const counterStore = useCounterStore();

// const store = useCounterStore();
// const { count, doubleCount } = storeToRefs(store);

// 获取文章列表数据的时机：
// 1、组件渲染完毕。2、频道id改变
watch(
  () => props.channelId,
  async (newChannelId) => {
    console.log('newChannelId', newChannelId);
    // 发起请求
    const res = await axios.get<ArticleResData>(
      'http://geek.itheima.net/v1_0/articles',
      {
        params: {
          channel_id: newChannelId,
          timestamp: Date.now(),
        },
      }
    );
    console.log('文章列表', res);
    articles.value = res.data.data.results;
  },
  { immediate: true }
);

// 用毫秒表示分钟、小时、天、周、月
let minute = 1000 * 60;
let hour = minute * 60;
let day = hour * 24;
let week = day * 7;
let month = day * 30;

// 传入时间格式或时间戳，这里传入的时间格式: 2022-08-05T08:17:14.000+00:00
const dataComputed = function (dateTime: any) {
  // 获取当前时间并转换为时间戳，方便计算
  let timestamp_current = new Date().getTime();

  // 将传入的时间格式字符串解析为Date对象
  let _date = new Date(dateTime);

  // 将Date对象转换为时间戳，方便计算
  let timestamp_input = _date.getTime();

  // 计算当前时间与传入的时间之间相差的时间戳
  let timestamp_diff = timestamp_current - timestamp_input;

  // 计算时间差共有多少个分钟
  let minC = timestamp_diff / minute;
  // 计算时间差共有多少个小时
  let hourC = timestamp_diff / hour;
  // 计算时间差共有多少个天
  let dayC = timestamp_diff / day;
  // 计算时间差共有多少个周
  let weekC = timestamp_diff / week;
  // 计算时间差共有多少个月
  let monthC = timestamp_diff / month;

  if (monthC >= 1 && monthC < 4) {
    return parseInt(monthC + '') + '月前';
  } else if (weekC >= 1 && weekC < 4) {
    return parseInt(weekC + '') + '周前';
  } else if (dayC >= 1 && dayC < 7) {
    return parseInt(dayC + '') + '天前';
  } else if (hourC >= 1 && hourC < 24) {
    return parseInt(hourC + '') + '小时前';
  } else if (minC >= 1 && minC < 60) {
    return parseInt(minC + '') + '分钟前';
  } else if (timestamp_diff >= 0 && timestamp_diff <= minute) {
    // 时间差大于0并且小于1分钟
    return '刚刚';
  } else {
    return '很久以前';
    // return (
    //   _date.getFullYear() +
    //   '年' +
    //   _date.getMonth() +
    //   '月' +
    //   _date.getDate() +
    //   '日'
    // );
  }
};

// 日期计算
// const dataComputed = (date: any) => {
//   // 我抽时间处理一下这个日期多久的规则
//   console.log(date);
//   return date;
// };

// onMounted(() => {
//   console.log('文章列表初始化传入的id', props.channelId);
// });

// 修改store中的数据
const incrementHandler = () => {
  console.log('+++');
  counterStore.update();
};

const requestHandler = () => {
  console.log('+++');
  counterStore.asyncUpdate(5);
};
</script>

<template>
  <div class="article-list">
    <div>{{ counterStore.count }} {{ counterStore.doubleCount }}</div>
    <button @click="incrementHandler">count++</button>
    <button @click="requestHandler">count请求</button>
    <button @click="counterStore.asyncUpdate(10)">count请求2</button>
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">
        {{ item.title }}
      </p>
      <img
        class="img"
        v-for="(img, i) in item.cover.images"
        :src="img"
        alt="图片"
        :key="i"
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dataComputed(item.pubdate) }}</span>
      </div>
    </div>
  </div>
</template>
